<template lang="pug">
  el-dialog(
    :title="type === 1 ? '基本信息导入' : '批量导入'"
    :visible="visibleDialog"
    width="540px"
    center
    @close="visibleDialog = false"
  )
    el-alert.warningBox(type="warning" :closable="false")
      div.c_regular(v-if="type === 1")
        p
          span
            | 1、请用户先下载TXT模板文件 ，点击下载
          a(href="javascript:" class="c_primary" @click="txtDownLoad")
            |《TXT模板文件》
        p 2、下载模板文件到本机后按照模板要求进行填写;
        p 3、填写完模板文件并保存然后上传模板文件;
        p 4、如果用户没有按照模板要求填写，人员记录信息将添加失败;
        p 5、切记用户不能使用自定义模板填写人员记录信息;
      div.c_regular(v-else)
        p 1、只支持上传.jpg(人脸)、.bmp(指静脉、指纹、虹膜)格式的照片
        p 2、最大允许上传1M照片
        p 3、照片名称为身份证号码
        p 4、照片目录是指存放于应用服务器的路径
    .mt20
      upload-file(
        v-if="type === 1"
        accept=".txt"
        :showFileList="false"
        @uploadFile="uploadFile"
      )
      el-input.w(placeholder="输入服务器地址" v-model="serveAddress" v-else)
    span(slot="footer" v-if="type === 2")
      el-button(@click="visibleDialog = false") 取消
      el-button(type="primary") 确定
</template>
<script>
import { UploadFile } from '@/components'

export default {
  components: {
    UploadFile
  },
  props: {
    type: {
      type: Number,
      default: 1
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) this.serveAddress = ''
      },
      immediate: true
    }
  },
  data () {
    return {
      serveAddress: '' // 批量导入服务器地址
    }
  },
  methods: {
    // 下载模板文件
    txtDownLoad () {

    },
    uploadFile (data) {
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.warningBox{
  padding: 12px;
  p {
    line-height: 1.8
  }
}
</style>
